<template>
  <div class="login-container">
    <div class="top-box">
      <p>欢迎进入南昌理工学院2022考试刷题系统</p>
      <p>共同奋斗，迎接未来!</p>
    </div>
    <div class="login-box">
      <div class="image"></div>
      <div class="login">
        <el-form
          :model="form"
          :rules="rules"
          ref="ruleForm"
          label-width="0px"
          class="login-form"
        >
          <p class="title" style="margin-top: 0">注册账号</p>

          <el-form-item prop="name" class="phone">
            <span class="iconfont icon-yonghu"></span>
            <el-input v-model="form.name" placeholder="请输入手机号"></el-input>
            <el-button
              type="info"
              :disabled="canClick ? false : true"
              class="verification"
              @click="getCode"
              >{{ verification }}</el-button
            >
          </el-form-item>

          <el-form-item prop="password">
            <span class="iconfont icon-mima"></span>
            <el-input
              v-model="form.password"
              :type="eyes ? 'value' : 'password'"
              placeholder="请输入密码"
            ></el-input>
            <span
              @click="changeEye"
              :class="
                eyes
                  ? 'iconfont eye icon-yanjing'
                  : 'iconfont eye icon-yanjing-biyan'
              "
            ></span>
          </el-form-item>

          <el-form-item prop="password2">
            <span class="iconfont icon-mima"></span>
            <el-input
              v-model="form.password2"
              :type="eyes2 ? 'value' : 'password'"
              placeholder="请再次输入密码"
            ></el-input>
            <span
              @click="changeEye2"
              :class="
                eyes2
                  ? 'iconfont eye icon-yanjing'
                  : 'iconfont eye icon-yanjing-biyan'
              "
            ></span>
          </el-form-item>

          <div style="display: flex">
            <el-form-item class="verification" prop="verification">
              <el-input
                v-model="form.verification"
                placeholder="请输入验证码"
              ></el-input>
            </el-form-item>
            <!-- <span class="verification-text" @click="getCode">{{ verificationValue }}</span> -->
          </div>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >注册账号</el-button
          >
          <!-- <p class="link-test">现在注册</p> -->
        </el-form>
      </div>
    </div>
    <div class="footer-box">
      © 2022 - 考试系统登陆界面 || 南理猿创工作室版权所有
    </div>
  </div>
</template>

<script>
import { getCode } from "@/api/index";
import { register } from "@/api/index";

export default {
  data() {
    var validateName = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("手机号不能为空"));
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("密码不能为空"));
      } else {
        if (this.form.password && this.form.password2) {
          if (this.form.password !== this.form.password2) {
            callback(new Error("两次密码不一样"));
          }
        }
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("密码不能为空"));
      } else {
        if (this.form.password && this.form.password2) {
          if (this.form.password !== this.form.password2) {
            callback(new Error("两次密码不一样"));
          }
        }
      }
    };
    var verification = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("验证码不能为空"));
      }
    };
    return {
      form: {
        name: "",
        password: "",
        password2: "",
        verification: ""
      },
      rules: {
        name: [{ validator: validateName, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
        password2: [{ validator: validatePass2, trigger: "blur" }],
        verification: [{ validator: verification, trigger: "blur" }],
      },
      clock: null,
      eyes: false,
      eyes2: false,
      canClick: true,
      verification: "获取验证码",
    };
  },
  mounted() {
    // this.$store.dispatch("user/login", user);
    // this.getCode();
  },
  methods: {
    // 切换密码显示
    changeEye() {
      this.eyes = !this.eyes;
    },
    changeEye2() {
      this.eyes2 = !this.eyes2;
    },
    // 获取手机验证码
    getCode() {
      var str = /^[1][3,5,7,8][0-9]{9}$/
      if (str.test(this.form.name)) {
        getCode(this.form.name)
          .then((res) => {
            // console.log(1);
            this.canClick = false;
            this.verification = 60;
            this.clock = setInterval(() => {
              this.doLoop();
            }, 1000);
          })
          .catch((err) => {
            // console.log(2);
            this.$message.error("获取验证码失败");
          });
      } else {
        this.$message.error("手机号格式有误")
      }
    },
    // 获取验证码倒计时
    doLoop() {
      this.verification--;
      if (this.verification > 0) {
      } else {
        clearInterval(this.clock);
        this.canClick = true;
        this.verification = "获取验证码";
      }
    },
    // 表单提交
    submitForm() {
      if(this.form.name && this.form.password && this.form.password2 && this.form.verification) {
        if(this.password !== this.password2) {
          this.$message.error("两次密码不一样")
        } else {
          let Form = {
            studentAccount: this.form.name,
            studentPwd: this.form.password,
            phoneCode: this.form.verification
          }
          register(Form)
            .then((res) => {
              this.$message.success("注册成功")
              this.$router.push("/login")
            })
        }
      } else {
        this.$message.error("请填完信息")
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  width: 100%;
  background: url("@/assets/bg1.webp") no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;

  .top-box {
    position: absolute;
    top: 20px;
    left: 0;
    width: 500px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    p {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 25px;
      font-weight: 600;
      margin: 0;
      color: #e7e7eb;
    }
  }

  .login-box {
    display: flex;
    justify-content: space-between;
    height: 395px;
    width: 600px;
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;

    .image {
      width: 260px;
      height: 100%;
      // background-color: pink;
      background: url("@/assets/photo1.png") no-repeat;
      background-size: cover;
    }

    .login {
      height: 100%;
      width: 270px;
      // background-color: pink;
      padding: 0 25px;

      .title {
        font-size: 25px;
        font-weight: 800;
      }

      .link-test {
        color: #89c3eb;
        cursor: pointer;
      }

      ::v-deep .el-form-item {
        border: 1px solid #dcd6d9;
        background: #fff;
        border-radius: 5px;
        color: #454545;

        span {
          margin: 0 10px;
        }

        .eye {
          margin: 0;
        }
      }

      ::v-deep .phone {
        position: relative;
        .verification {
          height: 100%;
          width: 35%;
          padding: 0;
          position: absolute;
          right: 0;
          span {
            margin: 0;
          }
        }
      }

      ::v-deep .verification {
        width: 100px;
        // margin: 0;
        .el-input {
          width: 100%;
          input {
            text-align: center;
            padding: 0;
          }
        }
      }

      .verification-text {
        width: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 20px;
        font-size: 25px;
        padding-bottom: 20px;
      }

      ::v-deep .el-input {
        display: inline-block;
        height: 47px;
        width: 75%;

        input {
          background: transparent;
          border: 0px;
          -webkit-appearance: none;
          border-radius: 0px;
          padding: 12px 5px 12px 0px;
          height: 47px;
        }
      }

      ::v-deep .el-button {
        width: 100%;
      }
    }
  }

  .footer-box {
    position: absolute;
    bottom: 50px;
    color: #d3cfd9;
    font-weight: 500;
  }
}
</style>
